<template>
	<view class="page">
		<!-- 顶部标题 -->
		<view class="header">
			<text class="title">字体大小</text>
			<button class="confirm" @click="confirmChange">完成</button>
		</view>

		<!-- 预览区域 -->
		<view class="preview">
			<view class="bubble">
				<text :style="{ fontSize: previewSize + 'px' }">拖动下面的滑块，可设置字体大小</text>
			</view>
			<view class="bubble">
				<text :style="{ fontSize: previewSize + 'px' }">
					设置后，会改变应用内的字体大小。如果在使用过程中存在问题或意见，可反馈给开发团队
				</text>
			</view>
			<view class="chat">
				<view class="chat-item left">
					<text :style="{ fontSize: previewSize + 'px' }">预览字体大小</text>
				</view>
				<view class="chat-item right">
					<text :style="{ fontSize: previewSize + 'px' }">😀</text>
				</view>
			</view>
		</view>

		<!-- 滑块控制 -->
		<view class="slider-wrap">
			<text>A</text>
			<slider class="slider" :min="14" :max="24" :step="1" :value="previewSize" activeColor="#07c160"
				backgroundColor="#ddd" @change="changeSize"></slider>


			<text style="font-size: 22px;">A</text>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { useSizeStore } from '@/store/shared/fontSize'

	const sizeStore = useSizeStore()
	const previewSize = ref(sizeStore.fontSize)

	// 确认修改并“重启应用”
	const confirmChange = () => {
		sizeStore.setFontSize(previewSize.value)
		uni.reLaunch({
			url: '/pages/login/login' // 跳回首页，相当于应用重启
		})
	}

	function changeSize(e : any) {
		previewSize.value = e.detail.value
	}
</script>

<style scoped>
	.page {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #f5f5f5;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 16px;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}

	.title {
		font-weight: bold;
		font-size: 18px;
	}

	.confirm {
		color: #07c160;
		font-size: 16px;
		background: none;
		border: none;
	}

	.preview {
		flex: 1;
		padding: 16px;
	}

	.bubble {
		margin-bottom: 10px;
		padding: 10px;
		background: #fff;
		border-radius: 8px;
	}

	.chat {
		margin-top: 20px;
	}

	.chat-item {
		margin-bottom: 10px;
		padding: 10px;
		border-radius: 8px;
		display: inline-block;
	}

	.left {
		background-color: #fff;
		align-self: flex-start;
	}

	.right {
		background-color: #07c160;
		color: #fff;
		align-self: flex-end;
	}

	.slider-wrap {
		display: flex;
		align-items: center;
		padding: 20px;
		background-color: #fff;
	}

	.slider {
		flex: 1;
		margin: 0 10px;
	}
</style>